<template>
  <div>
    <h1>欢迎光临vue水果店</h1>
    <h2>苹果{{ price }}元/斤，折扣{{ discount }}折</h2>
    请输入你要购买的斤数：<input type="number" v-model="num" />
    <br />
    <br />
    <button @click="pay">结账买单</button>
    <h2>
      <span>总价是:{{ sum }}元</span>, 
      <span>折后价:{{ nowMoney }}元</span>,
      <span>省了:{{ save }}元</span>
    </h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: 10,
      num: 0,
      sum: 0,
      discount: 8,
      nowPrice: 0,
      save: 0,
    };
  },
  methods: {
    pay() {
      this.sum = this.num * this.price
      this.nowMoney = this.num * this.price * (this.discount / 10)
      this.save = this.sum - this.nowMoney
    },
  },
};
</script>

<style>
</style>